<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../../../../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
	<div class="mod-toolbar-top cf">
		<div class="fr" style="margin-top: 10px;">
<!-- 			<a href="javascript:void(0);" class="ui-btn ui-btn-sp mrb" id="btn-search">搜索</a>
 -->			<a href="javascript:void(0);" class="ui-btn ui-btn-sp mrb" id="btn-add">新增</a> 
		</div>
	</div>
	<div class="grid-wrap" align="left" style="margin-left: 10px;">
		<table id="grid1"></table>
		<div id="pager2"></div>
	</div>
	<img src="" width=250 height=250 class="imgView" style="display: none;">
	
	<script type="text/javascript">
		function update() {
			alert("update");
			$.ajax({
				url : "update",
				dataType : "json",
				success : function(data) {
					
				},
				erro : function() {
					alert("爆炸了！");
				}

			});
		}
		function deletes() {
			alert("update");
			$.ajax({
				url : "permission/edit",
				dataType : "json",
				success : function(data) {

				},
				erro : function() {
					alert("爆炸了！");
				}
			});
		}
		function clearGrid() {
			$("#grid").jqGrid('clearGridData');
		}
		//添加图标
		function operationFormat(cellValue, options, rowObject) {
			if(!isEmpty(rowObject.checkerId) && rowObject.checkerId != 0){
				return '<div class="operating" data-id="' + options.rowId + 
				'"><span class="ui-icon ui-icon-pencil" title="查看" data-toggle="modal" data-target="#myModal"></span>';
						
			}
			return '<div class="operating" data-id="' + options.rowId + 
			'"><span class="ui-icon ui-icon-pencil" title="编辑" data-toggle="modal" data-target="#myModal"></span>&nbsp&nbsp'
					+ '<span class="ui-icon ui-icon-trash" title="删除"></span>';
		}

		function isEmpty(val) {
			if (undefined == val || val == "" || val == null || val == "null") {
				return true;
			}
			return false;
		}
		
		 function formatDate(value,format,time){
			  	if((value+"").indexOf(",") != -1){
			  		value = $.replaceTemplate(value+"",",","/");
			  	}
			  	var date = new Date(value);
			  	
			    var paddNum = function(num){
			        num += "";
			        return num.replace(/^(\d)$/,"0$1");
			      }
				
				if(isEmpty(format) ||format=="1" || format == 'null'){
					format='yyyy-MM-dd';
				}else if(format=="2"){
					format='yyyy/MM/dd';
				}else if(format=="3"){
					format='dd-MM-yyyy';
				}else if(format=="4"){
					format='dd/MM/yyyy';
				}
				if(!isEmpty(time)){
					format += ' hh:mm:ss';
				}
			      //指定格式字符
			      var cfg = {
			         yyyy : date.getFullYear() //年 : 4位
			        ,yy : date.getFullYear().toString().substring(2)//年 : 2位
			        ,M  : date.getMonth() + 1  //月 : 如果1位的时候不补0
			        ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
			        ,d  : date.getDate()   //日 : 如果1位的时候不补0
			        ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0
			        ,hh : paddNum(date.getHours())  //时
			        ,mm : paddNum(date.getMinutes()) //分
			        ,ss : paddNum(date.getSeconds()) //秒
			      }
			      format || (format = "yyyy-MM-dd hh:mm:ss");
			      return format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
		  }
		function timestampToTime(cellValue, options, rowObject) {
			var timestamp = cellValue;
			if(cellValue){
				timestamp = formatDate(timestamp,'','yyyy-MM-dd hh:mm');
		        return timestamp;
			}return '';
	    }
		function checkFormat(cellValue, options, rowObject) {
			if(!isEmpty(cellValue) && cellValue != 0){
				return '审批通过';
			}
			return '待审批';
		}
		function pictureFormat(cellValue, options, rowObject) {
			if(!isEmpty(rowObject.picture)){
				return '<img class="img" width="105" height="55" src="'+ rowObject.picture +'">'+
					   '<img id="bak1" class="img" width="105" height="55" src="'+ rowObject.bak1 +'">'+
					   '<img id="bak2" class="img" width="105" height="55" src="'+ rowObject.bak2 +'">';
			}
			return '';
		}
		
		$(function() {
			$("#grid1").jqGrid(
					{
						url : "askleave/list",
						datatype : "json",
						height : 400,
						width : '100%',
						shrinkToFit : false,
						autoScroll : false,
						rownumbers : true,
						rowNum : 5,
						rowList : [ 5, 10, 15 ], //可供用户选择一页显示多少条
						pager : '#pager2', //表格页脚的占位符(一般是div)的id
						sortname : 'id', //初始化的时候排序的字段
						sortorder : "asc", //排序方式,可选desc,asc
						viewrecords : true,
						pgbuttons : true,
						cellsubmit : "clientArray",
						colNames : [ "操作", "id", "personId","qingJiaTypeId","人员名称", "请假类型","图片temp","图片bak1", "图片bak2",  "图片", "开始时间","结束时间","备注","天数","审批结果"],
						colModel : [ {
							name : "operating",
							width : 70,
							formatter : operationFormat,
							align : "center",
							sortable : false
						}, {
							name : "id",
							index : "id",
							key : true,
							hidden : true,
							sorttype : "int",
							align : "center"
						},  {
							name : "personId",
							index : "personId",
							hidden : true
						}, {
							name : "qingJiaTypeId",
							index : "qingJiaTypeId",
							hidden : true
						},{
							name : "personName",
							editable : false,
							sorttype : "text",
							align : "center",
							width : 100
						},  {
							name : "qingJiaTypeName",
							editable : false,
							sorttype : "text",
							align : "center",
							width : 100
						},{
							name : "picture",
							align : "center",
							editable : false,
							hidden : true
						},{
							name : "bak1",
							align : "center",
							editable : false,
							hidden : true
						},{
							name : "bak2",
							align : "center",
							editable : false,
							hidden : true
						},{
							name : "picture2",
							align : "center",
							editable : false,
							sorttype : "text",
							width : 323,
							formatter : pictureFormat
						},  {
							name : "startTime",
							editable : false,
							sorttype : "text",
							align : "center",
							formatter : timestampToTime
						},  {
							name : "endTime",
							editable : false,
							sorttype : "text",
							align : "center",
							formatter : timestampToTime
						},  {
							name : "remark",
							editable : false,
							sorttype : "text",
							align : "center"
						},{
							name : "days",
							align : "center",
							editable : false,
							sorttype : "text",
							width : 100
						},{
							name : "checkerId",
							align : "center",
							editable : false,
							sorttype : "text",
							width : 120,
							formatter : checkFormat
						}],
						loadComplete : function() {
							loadover();
						},
						gridComplete : function() {
						},
						afterInsertRow : function() {
						},
						beforeEditCell : function(rowid, cellname, v, iRow,
								iCol) {
							lastrow = iRow;
							lastcell = iCol;
						}
					});
			initTableRow();
			initEvent();
			// 很简洁的图片预览功能，优化版
			$(document).on("mouseenter", ".img", function(t) {
				var e = $(this);
				if (e.attr("src") != "" && !e.data("initFloat")) {
					var n = $(".imgView");
					e.powerFloat({
						zIndex : 19998888888,
						eventType : "hover",
						target : function() {
							return n
						},
						offsets : {
							x : 0,
							y : 0
						},
						position : "2-1",
						showCall : function(t) {
							if (e.data("initFloat", true), e.prop("nodeName") == "IMG") {
								var i = e.attr("src");
								n.attr("src", i).load(function() {
									var realWidth = this.width, realHeight = this.height;
									realWidth >= 250 ? n.attr("src", i).css("width",
											"250px").css("height", "250px") : n.attr(
											"src", i).css("width", "auto").css(
											"height", "auto")
								})
							}
						}
					}), e.trigger("mouseenter");
				}
			});
		})
		//设置每行的高度
		function loadover() {
			var grid = $("#grid1");
			var ids = grid.getDataIDs();
			for (var i = 0; i < ids.length; i++) {
				grid.setRowData(ids[i], false, {
					height : 35
				});
			}
		}
		function initTableRow() {
			for (var i = 1; i <= 4; i++) {
				jQuery("#grid1").jqGrid('addRowData', i, {});
			}
			loadover();
		}
		//添加事件
		function initEvent() {
			$("#btn-add").click(function(a) {
				handle.operate("add");
			}) ,
			$("#btn-search").click(function(a){
				handle.search();
			}),
			$("#grid1").on("click", ".operating .ui-icon-pencil", function(a) {
				var rowid = $(this).parent().data("id");
				var rowdata=$("#grid1").jqGrid("getRowData",rowid);
				
				if($(this).attr("title") == "查看"){
					handle.operate("view",rowid,rowdata);	
				}else{
					handle.operate("edit",rowid,rowdata);
				}
			}), $("#grid1").on("click", ".operating .ui-icon-trash", function(a) {
				a.preventDefault();
				var rowid = $(this).parent().data("id");
				var rowdata=$("#grid1").jqGrid("getRowData",rowid);
				handle.del(rowid,rowdata);
			}),$("#btn-record").click(function(a) {
				$("#grid1").jqGrid().trigger("reloadGrid");
			}),$("#btn-setsession").click(function(a){
				$.ajax({
					url:encodeURI("user/setsession"),
					type:"POST",
					success:function(data){
						alert(data);
					}
				});	
			}),$("#btn-getsession").click(function(a){
				$.ajax({
					url:encodeURI("user/getsession"),
					type:"POST",
					success:function(data){
						alert(data);
					}
				});	
			})
		}
		handle = {
				
				operate: function(oper, rowid, rowdata) {
					var title;
					var data={};
					if ("add" == oper) {
						title = "新增请假信息";
						data={
							operate: oper,
							callback: this.callback
						}
					} else {
						title = "修改请假信息";
						if(oper=="view"){
							title = "查看请假信息";							
						}
						data={
							operate:oper,
							rowdata:rowdata,
							rowid:rowid,
							callback:this.callback
						}
					}
					this.dialog = $.dialog({
						title: title,
						data:data,
						content:"url:askleave/editjsp",
						width: 500,
						height: 400,
						max: false,
						min: false,
						cache: false,
						lock: true
					});
				},
				
				search:function(){
					var grid=$("#grid1");
					this.dialog = $.dialog({
						title: "搜索",
						data:{
							callback:this.callback,
							grid:grid
						},
						content:"url:permission/searchPermission",
						width : 500,
						height : 400,
						max : false,
						min : false,
						cache : false,
						lock : true
					});
				},
				  
				del: function(rowId,rowdata) {
					$.dialog.confirm("删除的数据将不能恢复，请确认是否删除？", function() {
						$.ajax({
							url:"askleave/del",
							type:"POST",
							data:{
								"id":rowId,
								"picture":rowdata.picture,
								"bak1":rowdata.bak1,
								"bak2":rowdata.bak2,
								"oper":"del"
							},
							success:function(data){
								$("#grid1").jqGrid().trigger("reloadGrid");	
							}
						});
					});
				},
				callback: function(data) {
					if(data!=undefined){
						$('#grid1').jqGrid('setGridParam',{search:true});  
						$("#grid1").jqGrid("setGridParam",{postData:data}).jqGrid("setGridParam",{page:1}).trigger("reloadGrid");
					}else{
						$("#grid1").jqGrid().trigger("reloadGrid");
					}
				}
			};
	</script>
</body>
</html>